<template>
  <div class="echarts">
    <el-tooltip
      class="item"
      effect="light"
      content="切换图表"
      placement="right-end"
    >
      <i class="toggle el-icon-refresh" @click="toggle"></i>
    </el-tooltip>

    <div class="main" ref="main"></div>
    <span v-show="echartsData.length == 1||newEchartsData.length==1">暂无数据</span>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    echartsData: {
      type: Array,
      default: [],
    },
    newEchartsData: {
      default: [],
      type: Array,
    },
  },
  data() {
    return {
      option: null,
      option1: null,
      myChart: null,
      widthW: 0,
      currentType: "line",
      toggleIndex: false,
    };
  },
  mounted() {
    window.onresize = (e) => {
      this.widthW = document.body.clientWidth;
    };
    this.initEcharts();

    this.myChart.on("magictypechanged", (params) => {
      if (params.currentType === "bar") {
        this.currentType = params.currentType;
      } else {
        this.currentType = params.currentType;
      }

      this.rend();
    });
  },
  methods: {
    initEcharts() {
      this.myChart = echarts.init(this.$refs.main);
      this.rend();
    },

    rend() {
      let agentTypes;
      if (!this.toggleIndex) {
        agentTypes = ["健康", "感染","死亡人数"];
      } else {
        agentTypes = ["健康人数","死亡人数","潜伏期", "发病期", "重症期"];
      }

      let datasetWithFilters = [];
      let seriesList = [];
      echarts.util.each(agentTypes, (agentType) => {
        var datasetId = "dataset_" + agentType;
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: "dataset_raw",
          transform: {
            type: "filter",
            config: {
              and: [
                { dimension: "nums", gte: 0 },
                { dimension: "agentType", "=": agentType },
              ],
            },
          },
        });

        seriesList.push({
          type: this.currentType,
          datasetId: datasetId,
          showSymbol: false,
          name: agentType,
          endLabel: {
            show: true,
          },
          labelLayout: {
            moveOverlap: "shiftY",
          },
          emphasis: {
            focus: "series",
          },
          encode: {
            x: "nums",
            y: "agentNumber",
            label: ["agentType", "agentNumber"],
            itemName: "nums",
            tooltip: ["agentNumber"],
          },
        });
      });

      if (!this.toggleIndex && this.option) {
        this.option.dataset[0].source = this.echartsData;
      }

      this.option = {
        animationDuration: 500,
        dataset: [
          {
            id: "dataset_raw",
            source: this.echartsData,
          },
          ...datasetWithFilters,
        ],
        title: {
          text: "疫情总人数模拟可视化",
          // textStyle:{
          //   fontSize:10
          // }
        },
        tooltip: {
          order: "valueDesc",
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          nameLocation: "middle",
        },
        yAxis: {
          name: "感染人数",
        },
        grid: {
          right: 100,
        },
        legend: {
          left: "28%",
          formatter:[
            '{name}'
          ].join('\n'),
        textStyle:{
          rich:{
            width:120,
            lineHeight:12
          }
        }
        },
        toolbox: {
          show: true,
          feature: {
            magicType: {
              type: ["line", "bar"],
            },
            saveAsImage: {},
            dataView: {
              show: true,
              lang: ["数据视图", "关闭"],
              readOnly: true,
            },
          },
        },
        series: seriesList,
      };

      if (this.toggleIndex) {
        this.option.title.text = "疫情人群变化分析";
        this.option.dataset[0].source = this.newEchartsData;
      }

      if (this.widthW > 1460) {
        this.option.grid.right = 60;
      }


      this.myChart.setOption(this.option, !this.toggleIndex);
      // this.myChart.setOption(this.option,true);

      this.option && this.myChart.setOption(this.option, !this.toggleIndex);
      
    },
    toggle() {
      this.toggleIndex = !this.toggleIndex;
    },
    clear() {
      for (var i = 0; i < this.option.series.length; i++) {
        //置空关键！！！  清空名字和数据
        this.option.series[i].data = [];
        this.option.series[i].name = "";
      }

      this.myChart.setOption(this.option, !this.toggleIndex);
      this.option && this.myChart.setOption(this.option, !this.toggleIndex); //重新setOption
    },
  },
  updated() {},
};
</script>

<style lang="less" scoped>
.main {
  height: 350px !important;
}
.el-drawer__wrapper {
  visibility: hidden;
}

.el-drawer {
  visibility: visible;
}
span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toggle {
  position: absolute;
  top: calc(50% - 20px);
  left: 5px;
  transform: rotate(90deg);
}
</style>
